<template>
    <v-container fluid>
        <v-container fluid>
            <h4 class="mb-3">提现申请</h4>

            <v-row align="center">
                <v-col :md="2" :sm="6">
                    <AutocompleteOrg v-model="queryOrg" item-key="org_code"></AutocompleteOrg>
                </v-col>
                <v-col :md="2" :sm="6">
                    <AutocompleteUser label="姓名" v-model="queryName" item-text="name"></AutocompleteUser>
                </v-col>

                <v-col :md="2" :sm="6">
                    <v-select :items="statusItem"  clearable v-model="queryStatus" label="状态"> </v-select>
                </v-col>

                <v-col :md="4" :sm="6">
                    <v-btn
                        dark
                        class="mb-2 mr-2"
                        @click="query()"
                    >查询
                    </v-btn>

                    <v-btn
                        dark
                        class="mb-2 mr-2"
                        @click="reset()"
                    >重置
                    </v-btn>

                    <v-btn
                        color="primary"
                        v-if="is_supper"
                        class="mb-2 mr-2"
                        :disabled="!is_all_new"
                        @click="dialog = true"
                    >变更状态
                    </v-btn>
                </v-col>
            </v-row>
        </v-container>
       
        <v-data-table
            item-key="id"
            :headers="headers"
            :items="items"
            no-data-text="没有数据..."
            :page.sync="pageNo"
            :items-per-page="pageSize"
            hide-default-footer
            show-select
            v-model="selected"
            class="elevation-1 overflow-x-auto"
            style="white-space: nowrap"
            calculate-widths
        >
            <template v-slot:[`item.status_name`]="{ item }">
               <span  class="red--text" v-if="item.status == -1">
                    {{item.status_name}}
               </span>
               <span v-else>
                    {{item.status_name}}
               </span>
            </template>
        </v-data-table>

        <v-row v-if="items.length > 0 && totalPage >= 1" class="mt-2">
            <v-col cols="12">
                <v-pagination
                    v-model="pageNo"
                    :length="totalPage"
                    :total-visible="7"
                    @input="onPageChange"
                ></v-pagination>
            </v-col>
        </v-row>

        <v-dialog
            v-model="dialog"
            persistent
            max-width="400px"
        >
            <v-form ref="form">
                <v-card>
                    <v-card-title>
                        <span class="text-h5" >更改提现状态</span>
                    </v-card-title>
                    <v-card-text>
                    <v-row>
                        <v-col cols="12" >
                            <v-select :items="statusItem"  clearable v-model="newStatus" label="状态"> </v-select>
                        </v-col>
                        <v-col cols="12" >
                            <v-textarea
                                label="备注"
                                v-model="comment"
                            ></v-textarea>
                        </v-col>
                       
                    </v-row>
                    
                    </v-card-text>
                    <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn  depressed   @click="dialog = false" :disabled="saving">
                        关闭
                    </v-btn>
                    <v-btn   depressed  color="primary" dark  @click="saveStatus()" :loading="saving">
                        确定
                    </v-btn>
                    </v-card-actions>
                </v-card>
            </v-form>
        </v-dialog>

    </v-container>
</template>

<script>
    import axios from "axios";
    import AutocompleteOrg from "../../widgets/AutocompleteOrg.vue";
    import AutocompleteUser from "../../widgets/AutocompleteUser.vue";
    import { mapGetters } from 'vuex';

    export default {
        data: () => ({
            headers: [
                { text: '序号', value: 'id' },
                { text: '组织名称', value: 'org.name' },
                { text: '姓名', value: 'user.name' },
                { text: '提现金额', value: 'money' },
                { text: '状态', value: 'status_name' },
                { text: '申请时间', value: 'created_at' },
                { text: '操作备注', value: 'comment' },
                { text: '操作', value: 'actions', sortable: false },
            ],
            items: [],
            pageNo: 1,
            pageSize: 20,
            totalPage: 0,
            statusItem: [
                { value: -1, text: '提现失败' },
                { value: '00', text: '提现中' },
                { value: 1, text: '提现成功' },
            ],
            queryStatus: null,
            queryName: null,
            queryOrg: null,
            selected: [],
            dialog: false,
            newStatus: 0,
            comment: '',
            saving: false
        }),


        components: {
            AutocompleteOrg: AutocompleteOrg,
            AutocompleteUser: AutocompleteUser,
        },

        computed: {
            ...mapGetters([
                'is_supper',
                'is_manager',
                'user'
            ]),

            is_all_new() {
                if (this.selected.length == 0) return false;

                return this.selected.every(v => v.status === 0);
            }
        },

        created() {
            this.loadList();
        },

        methods: {
            loadList() {
                this.loading = true;
                const that = this;
                
                const params = Object.entries({ 
                    pageSize: this.pageSize, 
                    page: this.pageNo, 
                    user_id: this.queryName ? this.queryName.id : '', 
                    org_code: this.queryOrg ? this.queryOrg.org_code : '',
                    status: this.queryStatus ? this.queryStatus : ''
                }).reduce((a,[k,v]) => (v ? (a[k]=v, a) : a), {});

                axios.get(`/user/withdraw`, {
                    params: params
                }).then((response) => {
                    if(response.data.data.length >= 0) {
                        this.items = response.data.data;
                        this.totalPage = response.data.last_page;
                    }
                })
                .catch(function () {})
                .then(function () {
                    that.loading = false;
                });
            },

            onPageChange() {
                this.loadList();
            },

            query() {
                this.pageNo = 1;
                this.loadList();
            },

            reset() {
                this.queryName = null;
                this.queryMobile = null;
                this.queryOrg = null;
                this.queryKyc = null;
                this.pageNo = 1;
                this.loadList();
            },

            saveStatus() {
                const that = this;
                that.saving = true;
                axios.post(`/user/withdraw/status`, {
                    status: this.newStatus,
                    ids: this.selected.map(v => v.id),
                    comment: this.comment
                }).then(response => {
                    if (response.data.code === 0) {
                        that.dialog = false;
                        that.comment = '';
                        that.selected = [];
                        that.loadList();
                    }

                     this.$toast.open({
                        message: response.data.msg,
                        type: response.data.code == 0 ? 'success' : 'error',
                        position: 'top-right',
                    });
                })
                .catch(function () {})
                .then(function () {
                    that.saving = false;
                });
            }
        }
    }
</script>
